<template>
  <ion-page>
    <ion-header class="ion-no-border">
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-back-button color="dark" text=""></ion-back-button>
        </ion-buttons>
        <ion-title>修改联系方式</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-card>
        <ion-card-content>
          <ion-row class="border_bottom">
            <ion-col>
              <ion-input type="password" placeholder="请输入登录密码" v-model="form.oldpassword"></ion-input>
            </ion-col>
          </ion-row>
          <ion-row class="border_bottom">
            <ion-col>
              <ion-input placeholder="请输入联系方式" v-model="form.phone"></ion-input>
            </ion-col>
          </ion-row>
          <ion-row class="ion-padding">
            <ion-col class="d-f ion-justify-content-center">
              <ion-button color="primary" @click="submitForm">提交</ion-button>
            </ion-col>
          </ion-row>
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {postAction} from '@/api/manage';
import {openToast} from '@/utils/CommonUtil';
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonInput,
  IonPage,
  IonCard,
  IonItem,
  IonIcon,
  IonButton,
  IonCardContent,
  IonContent,
  IonSearchbar,
  IonCardHeader,
  IonRow,
  IonCol,
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonAvatar,
  IonImg,
  IonBackButton,
  IonButtons,
  IonListHeader,
  IonChip
} from '@ionic/vue';
import {callOutline, reorderFourOutline, lockClosedOutline, personOutline} from 'ionicons/icons';
import app from "@/main";
export default defineComponent({
  name: 'PasswordPage',
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonInput,
    IonPage,
    IonCard,
    IonItem,
    IonIcon,
    IonButton,
    IonCardContent,
    IonContent,
    IonSearchbar,
    IonCardHeader,
    IonRow,
    IonCol,
    IonSegment,
    IonSegmentButton,
    IonLabel,
    IonAvatar,
    IonImg,
    IonBackButton,
    IonButtons,
    IonListHeader,
    IonChip,
  },
  data() {
    return {
      form: {
        id:null,
        oldpassword: '',
        phone: '',
      },
    }
  },
  setup() {
    const router = useRouter();
    return {
      lockClosedOutline,
      callOutline,
      reorderFourOutline,
      router
    }
  },
  methods:{
    submitForm(){
      if(this.form.oldpassword===''){
        openToast('密码不能为空')
        return;
      }
      if(this.form.phone===''){
        openToast('联系方式不能为空')
        return;
      }
      postAction('user/getPassword', this.form).then((res) => {
        if(res.data!==app.config.globalProperties.$currentUser.password){
          openToast('登录密码不正确')
        }else{
          this.form.id=app.config.globalProperties.$currentUser.id;
          postAction('user/updatePhone', this.form).then((res) => {
            openToast('修改成功')
          });
        }
      });
    }
  }
});
</script>

<style lang="less" scoped>
ion-content{
  --background: #f5f6f9;
}
</style>
